<template>
  <div class="project-up-date" @click.stop ref="upDataRef">
    <!-- @mousedown="handleClick" -->
    <slot :scope="value"></slot>
    <DropDown
      id="dropdownProject"
      :style="`position:absolute; top:${styleAttribute.top}px; left: ${styleAttribute.left}px; height: ${styleAttribute.height}px;z-index:10000000001`"
      v-if="type === 'dropdown'"
      :config="config"
      v-model:drawerVisible="drawerVisible"
      @change="handleDownChange"
    />
    <div class="project-time" v-if="type === 'date'">
      <el-date-picker v-bind="{ ...config.attributes }" v-model="configOrigan.data[configOrigan.key]" @change="handleChange" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onBeforeMount, onMounted, ref, watch } from "vue"; // nextTick
import DropDown from "./components/DropDown.vue";
const emit = defineEmits(["change"]);
// props
const props = defineProps({
  type: { type: String, default: "" },
  config: {
    type: Object,
    default: () => {
      return {
        attributes: {},
        key: "",
        data: {}
      };
    }
  }
});
// 变量
const configOrigan = ref({});
const drawerVisible = ref(false);
const upDataRef = ref(null);
const styleAttribute = ref({
  top: 0,
  left: 0,
  height: props.config?.style?.height || 400
});
const value = ref("");
// watch
watch(
  () => props.config,
  val => {
    configOrigan.value = val;
  },
  {
    deep: true,
    immediate: true
  }
);

// 方法
// const handleClick = () => {
//   if (props.type === "dropdown") {
//     drawerVisible.value = true;
//     let react = upDataRef.value.getBoundingClientRect();
//     nextTick(() => {
//       let dom = document.querySelector("#dropdownProject").getBoundingClientRect();
//       console.log(react, dom);
//       // 自适应窗口的高度和宽度
//       // alert(react.bottom);
//       // alert(dom.height);
//       // alert(react.bottom < dom.height);
//       styleAttribute.value.top = react.height;
//     });

//     // console.log(react);
//   }
// };
const handleChange = async () => {
  try {
    // console.log(props.config);
    if (props.config.api) {
      await props.config.api(configOrigan.value.data);
    }
    if (props.config.successCallback) {
      props.config.successCallback();
    }
    emit("change", true);
    emit("update:value", configOrigan.value.data[props.config.key]);
    console.log(configOrigan.value.data[props.config.key]);
  } catch (e) {
    console.log(e);
    if (props.config.failCallback) {
      props.config.failCallback();
    }
  }
};
const handleDownChange = val => {
  value.value = val;
};
const closeFn = e => {
  if (upDataRef.value && upDataRef.value.contains && e.target) {
    drawerVisible.value = upDataRef.value.contains(e.target);
  }
};
onBeforeMount(() => {
  window.removeEventListener("mousedown", closeFn);
});
onMounted(() => {
  if (props.config.data[props.config.key]) {
    value.value = props.config.data[props.config.key];
    if (props.config.initCallback) {
      props.config.initCallback(props.config.data);
    }
  }

  window.addEventListener("mousedown", closeFn);
});
</script>
<style lang="scss" scoped>
.project-up-date {
  position: relative;
  cursor: pointer;
  .project-time {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    opacity: 0;
    :deep(.el-date-editor) {
      width: 100%;
      height: 100%;
    }
    :deep(.el-input__wrapper) {
      width: 100%;
      height: 100%;
      padding: 0;
      cursor: pointer;
      .el-input__inner {
        width: 100%;
        height: 100%;
        padding: 0;
        cursor: pointer;
      }
    }
  }
}
</style>
